<!--营业概况-->
<template>
  <div>
    <div class="header-right">
      <el-button v-show="activeName2=='first'" class="export-btn  float-left" type="primary" round>{{lang._011}}</el-button>
      <!-- 导出按钮 -->
      <el-date-picker v-show="activeName2=='first'" class="dataTime float-left" v-model="dataTime" type="datetimerange" :picker-options="pickerOptions2"
        range-separator="|" start-placeholder="2018-3-13 0:00:00" end-placeholder="2018-3-13 24:00:00" align="right">
      </el-date-picker>
      <el-button v-show="activeName2=='first'" class="float-left search-btn" type="primary" round>{{lang._012}}</el-button>
      <!-- 时间选择 -->
      <!-- Tab1 的显示 -->
      <el-select v-show="activeName2=='second'" class="float-left select-input" v-model="value" :placeholder="lang._408" style="border-radius:14px 0 0 14px">
      </el-select>
      <el-select v-show="activeName2=='second'" class="float-left select-input" v-model="value" :placeholder="lang._408" style="border-radius:0">
      </el-select>
      <el-input v-show="activeName2=='second'" class="text-input float-left" width="131px" :placeholder="lang._407"></el-input>
      <el-date-picker v-show="activeName2=='second'" class="dataTime float-left" v-model="dataTime" type="datetimerange" :picker-options="pickerOptions2"
        range-separator="|" start-placeholder="2018-3-13 0:00:00" end-placeholder="2018-3-13 24:00:00" align="right" style="border-radius:0;">
      </el-date-picker>
      <el-button v-show="activeName2=='second'" class="float-left search-btn" type="primary" round>{{lang._012}}</el-button>
      <!-- Tab2 的显示 -->
      <el-select v-show="activeName2=='third'" class="float-left select-input" v-model="value" :placeholder="lang._453" style="border-radius:14px 0 0 14px">
      </el-select>
      <el-date-picker v-show="activeName2=='third'" class="dataTime float-left" v-model="dataTime" type="datetimerange" :picker-options="pickerOptions2"
        range-separator="|" start-placeholder="2018-3-13 0:00:00" end-placeholder="2018-3-13 24:00:00" align="right" style="border-radius:0;">
      </el-date-picker>
      <el-button v-show="activeName2=='third'" class="float-left search-btn" type="primary" round>{{lang._012}}</el-button>
      <!-- Tab3 的显示 -->
    </div>
    <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
      <el-tab-pane :label="lang._442" name="first">
        <el-table class="text-center tables" border :data="tableData1" stripe header-cell-style="color:#409eff;background:#EDF5FF">
          <el-table-column prop="uid" :label="lang._045" width="40">
          </el-table-column>
          <el-table-column prop="supplierName" :label="lang._445" width="250">
          </el-table-column>
          <el-table-column prop="number" :label="lang._446" width="176">
          </el-table-column>
          <el-table-column prop="toBeConfirmed" :label="lang._447">
            <el-table-column prop="billsGoodsNumber" :label="lang._448" width="100">
            </el-table-column>
            <el-table-column prop="goodsNumber" :label="lang._449" width="100">
            </el-table-column>
            <el-table-column prop="totalPrice" :label="lang._450" width="100">
            </el-table-column>
          </el-table-column>
          <el-table-column prop="toBeReconciled" :label="lang._451">
            <el-table-column prop="billsGoodsNumber1" :label="lang._448" width="100">
            </el-table-column>
            <el-table-column prop="goodsNumber1" :label="lang._449" width="100">
            </el-table-column>
            <el-table-column prop="totalPrice1" :label="lang._450" width="100">
            </el-table-column>
          </el-table-column>
          <el-table-column prop="settlementSettled" :label="lang._447">
            <el-table-column prop="billsGoodsNumber2" :label="lang._448" width="100">
            </el-table-column>
            <el-table-column prop="goodsNumber2" :label="lang._449" width="100">
            </el-table-column>
            <el-table-column prop="totalPrice2" :label="lang._450" width="100">
            </el-table-column>
          </el-table-column>
          <el-table-column prop="settled" :label="lang._447">
            <el-table-column prop="billsGoodsNumber3" :label="lang._448" width="100">
            </el-table-column>
            <el-table-column prop="goodsNumber3" :label="lang._449" width="100">
            </el-table-column>
            <el-table-column prop="totalPrice3" :label="lang._450">
            </el-table-column>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- 营销概况的详情标签页 -->
      <el-tab-pane :label="lang._443" name="second">
        <el-table class="text-center tables" border :data="tableData2" stripe header-cell-style="color:#409eff">
          <el-table-column prop="x" label="" width="40">
          </el-table-column>
          <el-table-column prop="uid" :label="lang._045" width="40">
          </el-table-column>
          <el-table-column prop="operate" :label="lang._028" width="40">
            <template slot-scope="scope">
              <el-button type="text" size="small">{{lang._078}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="supplier" :label="lang._074" width="230">
          </el-table-column>
          <el-table-column prop="store" :label="lang._259" width="290">
          </el-table-column>
          <el-table-column prop="shiporder" :label="lang._407" width="120">
          </el-table-column>
          <el-table-column prop="orderTime" :label="lang._438" width="140">
          </el-table-column>
          <el-table-column prop="goodsSheetType" :label="lang._439" width="80">
          </el-table-column>
          <el-table-column prop="cargoFlow" :label="lang._414" width="80">
          </el-table-column>
          <el-table-column prop="totalPrice" :label="lang._415" width="80">
          </el-table-column>
          <el-table-column prop="advance" :label="lang._402" width="80">
          </el-table-column>
          <el-table-column prop="status" :label="lang._401" width="270">
          </el-table-column>
          <el-table-column prop="remark" :label="lang._027">
          </el-table-column>
        </el-table>
        <el-footer>
          <el-checkbox class="float-left check-all-btn" v-model="checked">全选</el-checkbox>
          <el-button class="float-left btn" type="info" round>{{lang._451}}</el-button>
          <el-button class="float-left btn" type="info" round>{{lang._452}}</el-button>
          
        </el-footer>
      </el-tab-pane>
      <!-- 交接班记录的详情标签页 -->
      <el-tab-pane :label="lang._444" name="third">
        <el-table class="text-center tables" border show-summary="true" :data="tableData3" stripe header-cell-style="color:#409eff">
          <el-table-column prop="uid" :label="lang._045" width="40">
          </el-table-column>
          <el-table-column prop="recentTime" :label="lang._454" width="150">
          </el-table-column>
          <el-table-column prop="supplierName" :label="lang._445" width="353">
          </el-table-column>
          <el-table-column prop="supplierNumber" :label="lang._455" width="164">
          </el-table-column>
          <el-table-column prop="freightPrice" :label="lang._456" width="164">
          </el-table-column>
          <el-table-column prop="fixedRebate" :label="lang._457" width="164">
          </el-table-column>
          <el-table-column prop="deliveryFeeRebate" :label="lang._458" width="164">
          </el-table-column>
          <el-table-column prop="paymentAmount" :label="lang._459" width="164">
          </el-table-column>
          <el-table-column prop="remark" :label="lang._027">
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- 现金收支明细的详情标签页 -->
    </el-tabs>
  </div>
</template>
<style lang="less" scoped>
.el-table{
  width: calc(100% - 40px);
}
  .header-right {
    position: absolute;
    z-index: 2;
    right: 0;
    height: 60px;
    .export-btn {
      margin-top: 15px;
      height: 30px;
      line-height: 30px;
      padding: 0 20px;
      margin-left: 20px;
      margin-right: 20px;
    }
    .search-btn {
      height: 30px;
      line-height: 30px;
      padding: 0 20px;
      margin-top: 15px;
      border-radius: 0 14px 14px 0;
      margin-right: 20px;
    }
    .dataTime {
      border: 1px solid #409eff;
      color: #409eff;
      border-radius: 14px 0 0 14px;
      height: 30px;
      padding: 0;
      margin: 0;
      margin-top: 15px;
      overflow: hidden;
    }
    .text-input {
      border: 1px solid #409eff;
      color: #409eff;
      height: 28px;
      padding: 0;
      margin: 0;
      margin-top: 15px;
      overflow: hidden;
      width: 131px;
      border-radius: 0;
      border-right: 0;
    }
    .select-input {
      border: 1px solid #409eff;
      color: #409eff;
      height: 28px;
      padding: 0;
      margin: 0;
      margin-top: 15px;
      overflow: hidden;
      width: 131px;
      border-radius: 14px 0 0 14px;
      border-right: 0;
    }
  }
  .el-footer {
    position: fixed;
    bottom: 0;
    width: calc(100% - 200px);
    line-height: 60px;
    background: #FFF;
    .check-all-btn {
      color: #409EFF;
    }
    .btn {
      margin-top: 15px;
      height: 30px;
      line-height: 30px;
      padding: 0 20px;
      margin-left: 20px;
      margin-right: 20px;
    }
    .text-input {
      border: 1px solid #409eff;
      color: #409eff;
      height: 28px;
      padding: 0;
      margin: 0;
      margin-top: 15px;
      overflow: hidden;
      width: 131px;
      border-radius: 0;
      border-right: 0;
    }
  }
</style>
<style>
  .el-table {
    margin: 20px;
  }

  .el-tabs__header {
    height: 60px;
    margin: 0;
    background: #FFF;
  }

  .el-tabs__item {
    height: 30px;
    line-height: 30px;
    margin-top: 15px;
    border: none;
    color: #409eff;
    font-size: 15px;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__item {
    border-bottom: none;
    border-left: none;
    margin-left: 20px;
    margin-right: 20px;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__nav {
    border: none;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
    color: #FFF;
    background: #409eff;
    border-radius: 14px;
  }

  .el-tabs__content {
    height: calc(100vh - 61px - 80px);
    background: unset;
  }

  .el-date-editor .el-range-input {
    float: left;
    color: #409eff;
    width: calc(50% - 15px);
  }

  .el-date-editor .el-range-separator {
    float: left;
    color: #409eff;
  }

  .el-date-editor .el-range__icon {
    display: none;
  }

  .el-table th {
    text-align: center !important;
  }

  .el-table th,
  .el-table tr {
    background-color: unset;
  }

  .el-table tr {
    background: #edf5ff;
  }

  .el-table__row {
    background: unset !important;
  }

  .el-table .cell,
  .el-table th div {
    padding-left: 0;
    padding-right: 0;
  }

  .text-input .el-input__inner,
  .select-input .el-input__inner {
    height: 28px;
    line-height: 28px;
    border: none;
    float: left;
  }

</style>


<script>
  export default {
    props: ['lang'],
    data() {
      return {
        activeName2: 'first',
        //初始的选择标签页
        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        dataTime: '',
        //时间选择器
        tableData1: [{
          uid: '1',
          supplierName: '供货商A',
          number: '0001',
          billsGoodsNumber: '1',
          goodsNumber: '1',
          totalPrice: '80.00',
          billsGoodsNumber1: '1',
          goodsNumber1: '1',
          totalPrice1: '80.00',
          billsGoodsNumber2: '1',
          goodsNumber2: '1',
          totalPrice2: '80.00',
          billsGoodsNumber3: '1',
          goodsNumber3: '1',
          totalPrice3: '80.00',
        }, {
          uid: '1',
          supplierName: '供货商A',
          number: '0001',
          billsGoodsNumber: '1',
          goodsNumber: '1',
          totalPrice: '80.00',
          billsGoodsNumber1: '1',
          goodsNumber1: '1',
          totalPrice1: '80.00',
          billsGoodsNumber2: '1',
          goodsNumber2: '1',
          totalPrice2: '80.00',
          billsGoodsNumber3: '1',
          goodsNumber3: '1',
          totalPrice3: '80.00',
        }, {
          uid: '1',
          supplierName: '供货商A',
          number: '0001',
          billsGoodsNumber: '1',
          goodsNumber: '1',
          totalPrice: '80.00',
          billsGoodsNumber1: '1',
          goodsNumber1: '1',
          totalPrice1: '80.00',
          billsGoodsNumber2: '1',
          goodsNumber2: '1',
          totalPrice2: '80.00',
          billsGoodsNumber3: '1',
          goodsNumber3: '1',
          totalPrice3: '80.00',
        }, {
          uid: '1',
          supplierName: '供货商A',
          number: '0001',
          billsGoodsNumber: '1',
          goodsNumber: '1',
          totalPrice: '80.00',
          billsGoodsNumber1: '1',
          goodsNumber1: '1',
          totalPrice1: '80.00',
          billsGoodsNumber2: '1',
          goodsNumber2: '1',
          totalPrice2: '80.00',
          billsGoodsNumber3: '1',
          goodsNumber3: '1',
          totalPrice3: '80.00',
        }, {
          uid: '1',
          supplierName: '供货商A',
          number: '0001',
          billsGoodsNumber: '1',
          goodsNumber: '1',
          totalPrice: '80.00',
          billsGoodsNumber1: '1',
          goodsNumber1: '1',
          totalPrice1: '80.00',
          billsGoodsNumber2: '1',
          goodsNumber2: '1',
          totalPrice2: '80.00',
          billsGoodsNumber3: '1',
          goodsNumber3: '1',
          totalPrice3: '80.00',
        }, ],
        //营业概况的表格数据
        tableData2: [{
          x: '-',
          uid: '1',
          supplier: '供货商A',
          store: 'Tast of Blue',
          shiporder: '201125494851',
          orderTime: '2017-12-31 12:00:00',
          goodsSheetType: '进货单',
          cargoFlow: '1',
          totalPrice: '123.00',
          advance: '123.00',
          status: '待确认进货',
          remark: '加急'
        }, {
          x: '-',
          uid: '1',
          supplier: '供货商A',
          store: 'Tast of Blue',
          shiporder: '201125494851',
          orderTime: '2017-12-31 12:00:00',
          goodsSheetType: '进货单',
          cargoFlow: '1',
          totalPrice: '123.00',
          advance: '123.00',
          status: '待确认进货',
          remark: '加急'
        }, {
          x: '-',
          uid: '1',
          supplier: '供货商A',
          store: 'Tast of Blue',
          shiporder: '201125494851',
          orderTime: '2017-12-31 12:00:00',
          goodsSheetType: '进货单',
          cargoFlow: '1',
          totalPrice: '123.00',
          advance: '123.00',
          status: '待确认进货',
          remark: '加急'
        }, {
          x: '-',
          uid: '1',
          supplier: '供货商A',
          store: 'Tast of Blue',
          shiporder: '201125494851',
          orderTime: '2017-12-31 12:00:00',
          goodsSheetType: '进货单',
          cargoFlow: '1',
          totalPrice: '123.00',
          advance: '123.00',
          status: '待确认进货',
          remark: '加急'
        }, ],
        //交接班的表格数据
        tableData3: [{
          uid: '1',
          recentTime: '2017-12-31 12:00:00',
          supplierName: '供货商A',
          supplierNumber: '12535648852',
          freightPrice: '50.00',
          fixedRebate: '123.00',
          deliveryFeeRebate: '123.00',
          paymentAmount: '125.00',
          remark: '加急'
        },{
          uid: '1',
          recentTime: '2017-12-31 12:00:00',
          supplierName: '供货商A',
          supplierNumber: '12535648852',
          freightPrice: '50.00',
          fixedRebate: '123.00',
          deliveryFeeRebate: '123.00',
          paymentAmount: '125.00',
          remark: '加急'
        },{
          uid: '1',
          recentTime: '2017-12-31 12:00:00',
          supplierName: '供货商A',
          supplierNumber: '12535648852',
          freightPrice: '50.00',
          fixedRebate: '123.00',
          deliveryFeeRebate: '123.00',
          paymentAmount: '125.00',
          remark: '加急'
        },]
        //现金收支明细的表格数据
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  }

</script>
